<template>
	<div class="channel" :style="{ height: `calc(100vh - ${setMainHeight}` }">
		<el-card class="box-card" :style="{ height: `calc(100vh - ${setMainHeight}` }" style="overflow: auto">
			<!-- 查询、操作区域 -->
			<div class="searchContent">
				<!-- <div class="item">
					<div class="label">条件1：</div>
					<el-input v-model="reqData.params1" placeholder="" size="small" clearable></el-input>
				</div>
				<div class="item">
					<div class="label">条件2：</div>
					<el-select v-model="reqData.params2" size="small" placeholder="" clearable>
						<el-option label="选项1" :value="1"> </el-option>
						<el-option label="选项2" :value="2"> </el-option>
						<el-option label="选项3" :value="3"> </el-option>
						<el-option label="选项4" :value="4"> </el-option>
					</el-select>
				</div>

				<div class="item">
					<div class="label">条件3：</div>
					<el-date-picker v-model="reqData.params3" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期" size="small">
					</el-date-picker>
				</div>

				<el-button style="margin-left: 10px" type="primary" size="small" @click="getList">查询</el-button>
				<el-button type="default" size="small" @click="refresh">重置</el-button> -->
				<el-button type="primary" size="small" @click="addDialog = true">添加</el-button>
				<el-button type="warning" size="small" @click="delList">批量删除</el-button>
			</div>

			<!-- 列表区域 -->
			<el-table ref="channelList" :data="tableData" style="width: 100%">
				<!-- <el-table-column type="index" label="序号" width="50" align="center"> </el-table-column> -->
				<el-table-column align="center" type="selection" width="55"> </el-table-column>
				<el-table-column align="center" v-for="col in columns" :prop="col.prop" :key="col.prop" :label="col.label" :width="col.width">
				</el-table-column>
				<el-table-column align="center" label="操作" min-width="70">
					<template slot-scope="{ row }">
						<div class="innerBtns">
							<el-button type="primary" size="small" @click="lookInfo(row.id)">修改</el-button>
							<!-- <el-button type="warning" size="small">按钮2</el-button> -->
							<el-button type="danger" size="small" @click="dealById(row.id)">删除</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<el-dialog
			:title="addForm.id ? '修改' : '添加'"
			:visible.sync="addDialog"
			:close-on-click-modal="false"
			:modal="false"
			:center="true"
			width="50%"
			@close="closeDialog"
			v-dialogDrag
		>
			<el-form :model="addForm" ref="addForm" :rules="rules" label-width="120px" :inline="false" size="small">
				<el-form-item prop="videoNum" label="相机编号">
					<el-input v-model="addForm.videoNum"></el-input>
				</el-form-item>
				<el-form-item prop="videoAddress" label="视频地址">
					<el-input v-model="addForm.videoAddress"></el-input>
				</el-form-item>
				<!-- <el-form-item prop="channelState" label="通道状态">
					<el-input v-model="addForm.channelState"></el-input>
				</el-form-item> -->
				<el-form-item prop="des" label="相机描述">
					<el-input v-model="addForm.des" type="textarea" :rows="2"></el-input>
				</el-form-item>	
				<!-- <el-form-item prop="standNum" label="国标通道编号">
					<el-input v-model="addForm.standNum"></el-input>
				</el-form-item>								 -->
			</el-form>

			<span></span>
			<span slot="footer">
				<el-button size="small" @click="addDialog = false">取消</el-button>
				<el-button size="small" type="primary" @click="addList">确定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import {
  getChannelList,
  addChannelList,
  editChannelList,
  getChannelById,
  deleteCheckedApi
} from '../../api/channel'
export default {
	name: 'channel',
	data() {
		return {
			tableData: [],
			columns: [
				{
					prop: 'videoNum',
					label: '相机编号',
					width: '220',
				},
				{
					prop: 'videoAddress',
					label: '视频地址',
					width: '580',
				},
				{
					prop: 'channelState',
					label: '通道状态',
					width: '240',
				},
				{
					prop: 'des',
					label: '相机描述',
					width: '240',
				},				
				// {
				// 	prop: 'standNum',
				// 	label: '国标通道编号',
				// 	width: '240',
				// },
			],
			reqData: {
				params1: '',
				params2: '',
				params3: '',
			},

			addForm: {
				id: '',
				videoNum: '',
				videoAddress: '',
				channelState: '',
				standNum: '',				
			},
			rules: {
				// params1: [
				// 	{
				// 		required: true,
				// 		message: '请输入参数1',
				// 		trigger: 'blur',
				// 	},
				// ],
				// params2: [
				// 	{
				// 		required: true,
				// 		message: '请输入参数2',
				// 		trigger: 'change',
				// 	},
				// ],
				// params3: [
				// 	{
				// 		required: true,
				// 		message: '请输入参数3',
				// 		trigger: 'change',
				// 	},
				// ],
			},

			addDialog: false,
		};
	},
	computed: {
		// 设置主盒子高度
		setMainHeight() {
			let { isTagsview } = this.$store.state.themeConfig.themeConfig;
			if (isTagsview) return `114px`;
			else return `80px`;
		},
	},
	mounted() {
		this.getList();
	},
	methods: {
		// 查询列表
		getList() {
			const param = {
				// taskName: this.searchTaskName,
				// taskModel: this.searchTaskModel,
				// taskStatus: this.searchtaskStatus,
				// pageSize: this.pageSize,
				// currentPage: 1
			}
			getChannelList(param).then((res) => {
				// console.log(res)
				this.tableData = res
			})

		},
		// 重置
		refresh() {
			this.reqData = {
				params1: '',
				params2: '',
				params3: '',
			};

			this.getList();
		},
		// 查看详情
		lookInfo(id) {
			// 根据id调接口查询详情，打开弹窗回填参数
			const param = {
				id: id
			}
			getChannelById(param).then((res) => {
				console.log(res)
				this.addForm = res
			})
			// this.addForm = {
			// 	id: id,
			// 	params1: '',
			// 	params2: '',
			// 	params3: '',
			// };
			this.addDialog = true;
		},
		addList() {
			this.$refs.addForm.validate(async (valid) => {
				if (valid) {
					try {
						// 调接口
						this.addForm.id ? await editChannelList(this.addForm) : await addChannelList(this.addForm);
						this.$message.success(this.addForm.id ? '修改成功' : '新增成功！');
						this.getList();
						this.addDialog = false;
					} catch (error) {
						console.log(error);
						this.$message.error('操作失败！');
					}
				} else {
					return false;
				}
			});
		},
		dealById(id){
			this.$confirm('将要删除选中的数据, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(async () => {
					// 返回数组中每一项的id
					const ids = [id];
                    try {
                        // 调用删除接口
						const param = {
							ids: ids
						}
						await deleteCheckedApi(param); 
						// 重新调用查询列表接口
						this.getList();
						this.$message.success('删除成功!');
					} catch (error) {
						console.log(error);
						this.$message.error('删除失败！');
					}
				})
				.catch((err) => {
					console.log(err);
				});
		},
		// 批量删除
		delList() {
			if (!this.$refs.channelList.selection.length) {
				return this.$message.warning('请选择要删除的数据');
			}
			this.$confirm('将要删除选中的数据, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(async () => {
					// 返回数组中每一项的id
					const ids = this.$refs.channelList.selection.map((item) => item.id);
                    try {
                        // 调用删除接口
						const param = {
							ids: ids
						}
						await deleteCheckedApi(param); 
						// 重新调用查询列表接口
						this.getList();
						this.$message.success('删除成功!');
					} catch (error) {
						console.log(error);
						this.$message.error('删除失败！');
					}
				})
				.catch((err) => {
					console.log(err);
				});
		},
		closeDialog() {
			this.addForm = {
				id: '',
				videoNum: '',
				videoAddress: '',
				channelState: '',
				standNum: '',
			};
		},
	},
};
</script>

<style scoped lang="scss">
.channel {
	::v-deep .el-button--small,
	.el-button--small.is-round {
		height: 32px;
	}

	.searchContent {
		display: flex;
		flex-wrap: wrap;
		.item {
			width: 300px;
			height: 32px;
			line-height: 32px;
			display: flex;
			margin-bottom: 10px;

			.label {
				width: 80px;
				text-align: right;
				margin-right: 5px;
			}
		}
	}
}
</style>
